<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import StatisticAnalysisTable from './StatisticAnalysisTable.vue'
import {
  GetWeightStatisticsList,
  GetBarWheelMachineWorkAll
} from '@/api/publicApi'

const stackTime = ref([])

let totalWork: any = reactive({})

// refs
const statisticAnalysisTableRef = ref()

// 定义函数
onMounted(() => {
  // 总量统计
  GetBarWheelMachineWorkAll({
    BarWheelMachineCode: localStorage.BarWheelMachineCode
  }).then(res => {
    totalWork = { ...res.result.items[0] }
    console.log('统计历史数据qqqqqqq----->', totalWork)
  })
})
const serachTableData = (num: number) => {
  console.log('统计历史数据----->', statisticAnalysisTableRef.value.totalWork)
}
</script>

<template>
  <div class="statistic-analysis-main-box">
    <div class="base-info">
      <div>
        <div>堆料作业效率</div>
        <div>
          {{ totalWork.stockEfficiency || 0 }}&ensp;吨/小时
        </div>
      </div>
      <div>
        <div>取料作业效率</div>
        <div>
          {{ totalWork.takeEfficiency || 0 }}&ensp;吨/小时
        </div>
      </div>
      <div>
        <div>设备使用率</div>
        <div>
          {{ totalWork.usedRate || 0 }}&ensp;%
        </div>
      </div>
      <div>
        <div>总堆料量</div>
        <div>
          {{ totalWork.stockWeight || 0 }}&ensp;吨
        </div>
      </div>
      <div>
        <div>总取料量</div>
        <div>
          {{ totalWork.takeWeight || 0 }}&ensp;吨
        </div>
      </div>
    </div>
    <div class="filter-criteria-stack">
      <div class="date-picker-box">
        <el-date-picker
          v-model="stackTime"
          :clearable="false"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="datetimerange"
          format="YYYY-MM-DD HH时"
          value-format="YYYY-MM-DD HH:00:00"
          sizi="small"
        />
      </div>
      <div
        class="search-btn custom-button"
        @click="serachTableData(1)"
      >
        查询
      </div>
    </div>
    <div class="table-box">
      <StatisticAnalysisTable ref="statisticAnalysisTableRef" />
    </div>
  </div>
</template>

<style scoped lang=scss>
.statistic-analysis-main-box {
  width: 100%;
  height: 100%;

  .base-info {
    display: flex;
    width: 50%;
    margin-left: 15px;

    >div {
      >div {
        width: 100%;
      }

      display: flex;
      flex-wrap: wrap;
      align-items: c;
      width: 180px;
      height: 60px;

      /* border: 1px solid red; */
    }
  }

  .filter-criteria-stack {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 30px;
    margin-top: 10px;
    padding-left: 15px;

    /* border: 1px solid red; */

    .date-picker-box {
      width: 500px;
      height: 100%;
    }

    .search-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 100%;
      margin-left: 15px;
    }
  }

  .table-box {
    height: 60%;
    margin-top: 15px;
    padding: 0 15px;
  }
}
</style>
